<template>
    <div>
        <div class="head">
            <p>榜单</p>
        </div>
        <div id="body">
            <div class="bb">
                <img :src="require('../assets/type/1.png')">
                <p>总榜</p>
            </div>
            <div class="bb">
                <img :src="require('../assets/type/2.png')">
                <p>新书榜</p>
            </div>
            <div class="bb">
                <img :src="require('../assets/type/3.png')">
                <p>童书榜</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
    div{
        width: 94%;
        margin-top: 2vw;
        background: #fff;
        margin-left: 2vw;
        .head{
            font-weight: bold;
            font-size: 4vw;
            padding-top: 3vw;
            padding-left: 1vw;
        }
        #body{
            display: flex;
            padding-bottom: 5vw;
            .bb{
                img{
                    width: 17vw;
                    padding-left: 2vw;
                }
                p{
                    padding-top: 1vw;
                    text-align: center;
                }
            }
        }
    }
</style>